<template>
  <div class="homeHeader_bigbox">
    <div class="top_left top-left" @click="blackClick">
      <span class="iconfont">&#xe6f0;</span>
    </div>
    <div class="top_input">
      <input type="text" placeholder="请输入" />
    </div>
    <div class="top_right" @click="cityRouter">
      <!-- 最开始的笨的方法 -->
      <!-- {{this.$store.state.city}} -->
      <!-- 高级用法 mapState的数组方式 -->
      {{this.city}}
      </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {};
  },
  props:{
    // city:String
  },
  // 计算属性
  computed:{
    // 意思：我的公用数据city映射到这个组件的计算属性上，他的名字是city。这里可以使用对象方式，也可以使用数组方式。
    ...mapState(["city"])
  },
  // 点击事件
  methods: {
    blackClick() {
      console.log(3333);
    },
    cityRouter(){
      console.log(111)
     this.$router.replace("/city");
    }
  }
};
</script>
<style lang="stylus" scoped>
// 公用的css抽离放入varbles的文件夹中，1rem=100px
/***
正常引入：@import '../../../assets/stylus/varbles';
也可以简单引入css：@import '~@/assets/stylus/varbles';
还可以优化@import '~styles/varbles';
***/
@import '~styles/varbles';
.homeHeader_bigbox 
    background-color: $bgColor
    display: flex
    line-height:.86rem
    color: #ffffff
    .top_left
      float: left;
      width: 1.14rem;
      text-align: center;
      background-color: aqua;
    .top_input 
      flex: 1;
      height .3rem
    .top_input input
      margin-left: 0.2rem;
      height 0.5rem
    .top_right 
      float: right;
      width: 1.24rem;
      text-align: center;
      background-color: aqua;
</style>